<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div style="display:flex">
            <div style="flex:1;text-align:center" @click="dialog_0_is_show = true">
                {{shops.indexOf('taobao') != -1 ? '淘宝' : ''}}
                {{shops.indexOf('jd') != -1 ? '京东' : ''}}
                {{shops.length == 0 ? '请选择商城' : ''}}
            </div>
            <div style="flex:1;text-align:center" @click="dialog_1_is_show = true">
                {{billStatus}}
            </div>
        </div>
        <div class="scroll" style="width:100%;height:calc(100% - 25px);overflow:hidden">
            <div class="xs-container" :style="{height:isMobile?'':'100%'}">
                <div class="xs-content" :style="{height:isMobile?'':'100%'}">
                    <weui-panel title="" style="overflow-y:auto" :list="panel_0_list" :style="{
            maxHeight : isMobile ? '' :
            is_last_page ? '100%': 'calc(100% - 25px)'
          }">
                    </weui-panel>
                    <div style="text-align:center" v-if="!isMobile && !is_last_page" @click="view_page++">
                        加载更多
                    </div>
                </div>
            </div>
        </div>
        <weui-dialog title="选择商城" :list="dialog_0_list" :is_show="dialog_0_is_show" @on-click="dialog_0_on_click">
            <weui-input title="" more_label="" agreement_name="" :tips="null" :list="input_0_list">
            </weui-input>
        </weui-dialog>
        <weui-dialog title="选择订单状态" :list="dialog_0_list" :is_show="dialog_1_is_show" @on-click="dialog_1_on_click">
            <weui-input title="" more_label="" agreement_name="" :tips="null" :list="input_1_list">
            </weui-input>
        </weui-dialog>
    </div>
</template>
<script>
import WeuiPanel from '../vue2componentSet/src/components/WeuiPanel'
import WeuiDialog from '../vue2componentSet/src/components/WeuiDialog'
import WeuiInput from '../vue2componentSet/src/components/WeuiInput'
import global from '../lib/global'
import Xscroll from '../lib/xscroll/xscroll'
import Pulldown from '../lib/xscroll/plugins/pulldown'
import Pullup from '../lib/xscroll/plugins/pullup'
import browserDetect from '../lib/browserDetect'
import axios from 'axios'

var xscroll
var pulldown
var pullup

export default {
    components: {
        WeuiPanel,
        WeuiDialog,
        WeuiInput
    },
    data() {
        return {
            bills: [],
            isMobile: false,
            shops: ['taobao', 'jd'],
            dialog_0_is_show: false,
            dialog_0_list: ['取消', '确定'],
            input_0_list: [{
                type: 'checkbox',
                value: [],
                list: [{
                    label: '淘宝',
                    value: 'taobao'
                }, {
                    label: '京东',
                    value: 'jd'
                }]
            }],
            dialog_1_is_show: false,
            billStatus: '全部订单',
            input_1_list: [{
                type: 'radio',
                value: '全部订单',
                list: [{
                    label: '全部订单',
                    value: '全部订单'
                }, {
                    label: '未完成订单',
                    value: '未完成订单'
                }, {
                    label: '待返现订单',
                    value: '待返现订单'
                }, {
                    label: '已返现订单',
                    value: '已返现订单'
                }, {
                    label: '已失效订单',
                    value: '已失效订单'
                }]
            }],
            page: 0,
            is_last_page: false,
            view_page: 1,
            customer_phone: ''
        }
    },
    mounted() {
        location.hash.split('?')[1] && location.hash.split('?')[1].split('&').forEach(kv => {
            this[kv.split('=')[0]] = decodeURIComponent(kv.split('=')[1])
        })

        this.$store.commit('set_title', (this.customer_phone == '*' ? '全部' : this.customer_phone) + '的订单')

        if (!this.$store.state.admin) {
            this.$router.goback()
            return
        }

        this.isMobile = browserDetect().mobile

        if (this.isMobile) {
            xscroll = new Xscroll({
                renderTo: this.$el.querySelector('.scroll'),
                bounce: true,
                lockX: true,
                lockY: false,
                scrollbarX: false,
                scrollbarY: false,
                useOriginScroll: false,
                useTransition: true,
                preventDefault: false,
                preventTouchMove: true,
                boundryCheck: true,
                gpuAcceleration: true,
                stopPropagation: true,
                isRealScrollingY: true
            });
            pulldown = new Pulldown({
                autoRefresh: false,
                downContent: '下拉刷新',
                upContent: '松开刷新',
                loadingContent: '刷新中'
            });
            pulldown.on('loading', (e) => {
                this.view_page = 1
                this.page = 0
                this.bills = []
                this.is_last_page = false
            })
            xscroll.plug(pulldown);
            pullup = new Pullup({
                upContent: '上拉加载更多',
                downContent: '松开加载更多',
                loadingContent: '加载中'
            })
            pullup.on('loading', (e) => {
                this.view_page++
            })
            xscroll.plug(pullup);
            xscroll.render();
        }

        //      this.getBill().then(() => {
        //        this.$nextTick(() => {
        //          xscroll && xscroll.render()
        //        })
        //      })

        this.input_0_list[0].value.push('taobao')
        this.input_0_list[0].value.push('jd')
    },
    computed: {
        panel_0_list() {
            var list = []
            if (!this.customer_phone) {
                return list
            }
            this.bills.forEach(item => {
                if (this.shops.indexOf(item.shop) == -1) {
                    return
                }
                var desc = ''
                if (item.payStatus == 13) {
                    if (['全部订单', '已失效订单'].indexOf(this.billStatus) == -1) {
                        return
                    }
                    desc = '创建时间: ' + item.createTime + '(已失效订单)'
                } else if (item.payStatus != 3) {
                    if (['全部订单', '未完成订单'].indexOf(this.billStatus) == -1) {
                        return
                    }
                    desc = '创建时间: ' + item.createTime + '<br>预计返还: ￥' + item.feeString + '(未完成订单)'
                } else if (!item.returnTime) {
                    if (['全部订单', '待返现订单'].indexOf(this.billStatus) == -1) {
                        return
                    }
                    desc = '完成时间: ' + item.earningTime + '<br>可返还: ￥' + item.feeString + '(待返现订单)'
                } else {
                    if (['全部订单', '已返现订单'].indexOf(this.billStatus) == -1) {
                        return
                    }
                    desc = '返现时间: ' + item.returnTime + '<br>返还: ￥' + item.feeString + '(已返现订单)'
                }
                let bill = {
                    title: item.auctionTitle,
                    desc: desc,
                    infos: ['数量: ' + item.auctionNum, '店名: ' + item.exShopTitle]
                }
                if (item.taobaoTradeParentId && item.auctionId) {
                    bill.link = '#/billInfo?taobaoTradeParentId=' + item.taobaoTradeParentId + '&auctionId=' + item.auctionId
                } else if (item.orderId) {
                    bill.link = '#/billInfo?orderId=' + item.orderId
                } else if (item.tradeParentId && item.itemId) {
                    bill.link = '#/billInfo?tradeParentId=' + item.tradeParentId + '&itemId=' + item.itemId
                }
                list.push(bill)
            })
            if (list.length < this.view_page * 10) {
                this.page++
                this.getBill().then(() => {
                    if (this.isMobile) {
                        this.$nextTick(() => {
                            xscroll && xscroll.render()
                            pulldown && pulldown.reset(() => {
                                xscroll && xscroll.render()
                            })
                            pullup && pullup.complete()
                        })
                    }
                })
            }
            return list
        }
    },
    methods: {
        getBill() {
            if (this.is_last_page) {
                return new Promise(resolve => {
                    resolve()
                })
            }
            return new Promise((resolve, reject) => {
                axios.post(global.server + 'getCustomerBill.do', {
                    page: this.page,
                    customer_phone: this.customer_phone
                }).then(result => {
                    const obj = result.data
                    if (obj.result == 1) {
                        //              var _obj
                        //              for (var i = 0; i < obj.bills.length; i++) {
                        //                for (var j = i + 1; j < obj.bills.length; j++) {
                        //                  if (obj.bills[i].createTime < obj.bills[j].createTime) {
                        //                    _obj = obj.bills[i]
                        //                    obj.bills[i] = obj.bills[j]
                        //                    obj.bills[j] = _obj
                        //                  }
                        //                }
                        //              }
                        this.bills.push.apply(this.bills, obj.bills)
                        if (obj.bills.length < 10) {
                            this.is_last_page = true
                        }
                        resolve()
                    } else if (obj.result == 0) {
                        this.$store.commit('customer_login', null)
                        this.$router.goback()
                    }
                })
            })
        },
        dialog_0_on_click(index) {
            if (index == 1) {
                var shops = []
                this.input_0_list[0].value.forEach(item => {
                    shops.push(item)
                })
                this.shops = shops
            }
            this.dialog_0_is_show = false
        },
        dialog_1_on_click(index) {
            if (index == 1) {
                this.billStatus = this.input_1_list[0].value
            }
            this.dialog_1_is_show = false
        }
    }
}
</script>